<template>
  <div class="chara-total">
    <div class="container">
      <h1>本地部署方案特点</h1>

      <ul>
        <li v-for="item in list" :key="item.id">
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "chara",

  data() {
    return {
      list: [
        { id: 1, name: "业务使用频次较高" },
        { id: 2, name: "对数据保密性要求高" },
        { id: 3, name: "拥有稳定的服务器" },
        { id: 4, name: "有企业业务功能定制" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.chara-total {
  width: 100%;
  background: #f7f9fe;
  li {
    list-style-type: none;
  }
  .container {
    width: 1250px;
    margin: 0 auto;
    overflow: hidden;
    h1 {
      margin: 80px 0 79px 0;
      font-size: 36px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #333333;
        text-align: center;
    }
    ul {
      display: flex;
      justify-content: space-between;
      margin-bottom: 156px;
    }
    li {
      width: 264px;
      height: 280px;
      color: #fff;
      p {
          margin-top: 181px;
          text-align: center;
      }
    }
    li:nth-child(1) {
      background: url("../assets/img/chara_img1.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(2) {
      background: url("../assets/img/chara_img2.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(3) {
      background: url("../assets/img/chara_img3.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(4) {
      background: url("../assets/img/chara_img4.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>